@import '~@/assets/scss/base';

.angShower{
  box-sizing: border-box;
  font-family: Arial, “Microsoft YaHei”, “微软雅黑”, sans-serif;
  &.input{
    position: absolute;
    top: 0;
    right: 10px;
    height: $ang-height;
    line-height: $ang-height;
    font-size: 13px;
  }
  &.show{
    display: inline-block;
    font-size: 14px;
  }
  padding: 0 6px;
  border-radius: 4px;
  // background-color: #b4bacc;
  &.error{
    color: #ff6b81;
    animation: showError .3s linear 0s 2;
  }
  &>.help{
    user-select: none;
    text-decoration: none;
    display: inline-block;
    position: relative;
    margin-left: 8px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background-color: #f5f8f7;
    transition: background-color .1s linear;
    &:before{
      content: '仅支持整数';
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(-40%) translateY(-100%);
      white-space: nowrap;
      background-color: #f5f8f7;
      padding: 5px 5px 6px;
      border-radius:  10px;
      transition: opacity .3s linear;
      font-size: 12px;
      opacity: 0;
      box-shadow: 0 0 4px -2px $shadow-color;
    }

    &:hover{
      &:before{
        visibility: visible;
        opacity: 1;
      }
    }

  }
}
@keyframes showError {
  0%{
    transform: translateX(0);
  }
  25%{
    transform: translateX(-5px);
  }
  50%{
    transform: translateX(0);
  }
  75%{
    transform: translateX(5px);
  }
  100%{
    transform: translateX(0);
  }
}